<template>
  <div class="chartContent">
    <div id="myChart_t" ref="chartRefTwo" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import {markRaw, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
import * as echarts from 'echarts';
import {useMenuList} from '@/pinia/menu.js'
import { debounce } from 'lodash'
import { handleTooltipPosition } from '@/utils/tools.js'

const props = defineProps({
  chartData: Array
})

let chartData = ref([])
const chartRefTwo = ref()
const chartInit = ref()

// 获取图形数据
const getChartData = () => {
  let _color = [
      'rgba(255, 228, 138, 1)',
      'rgba(67, 207, 124, 1)',
      'rgba(255, 141, 26, 1)',
      'rgba(114, 46, 209, 1)',
      'rgba(255, 153, 0, 1)'

  ]
  let newData = [{
    name: '',
    itemStyle: {
      color: 'rgba(255, 150, 46, 1)'
    }
  }]
  let newLinks = []
  chartData.value.forEach((item, index) => {
    newData.push({
      name: item.name,
      itemStyle: {
        color: _color[index % 5]
      }
    })

    newLinks.push({
      source: '',
      target: item.name,
      value: item['value'],
      color: _color[index % 5],
    },)
  })

  drawChart(newData, newLinks)
}

const drawChart = (newData, newLinks) => {
  chartInit.value = markRaw(echarts.init(chartRefTwo.value))
  let option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      position: handleTooltipPosition,
      formatter: function (params) {
        if(params.data['name'] === '') {
          return ``
        } else {
          // console.log(params)
          // return `全部通话 <br/> ${params.data['target'] + '：' +   params.data['value']}次`
          if (params.data.value === undefined) {
            return ''
          } else {
            return `
                <span style="display:inline-block;margin-right:5px;width:8px;height:8px;border-radius: 8px; background-color:${params.data.color};"></span>
                <span style="font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, 1);height: 35px;line-height: 16px; border-radius: 24px;background: ${params.data.color};display: inline-block;padding: 10px;">
                    ${params.data['value']}个
                </span>`
          }
        }
      },  //提示框的内容
      padding: [0, 5],
      backgroundColor: '', //设置背景颜色
      borderColor: '', //设置边框颜色
      boxShadow: '', // 设置边框阴影
      extraCssText: 'box-shadow: 0px 0px 0px 0px rgba(255,255,255,0);', // 去掉阴影
    },
    series: {
      left: 95,
      right: 160,
      bottom: 40,
      draggable: false,
      type: 'sankey',
      layout: 'none',
      emphasis: {
        focus: 'adjacency'
      },
      data: newData,
      links: newLinks,
      lineStyle: {
        color: 'target',
      }
    }
  };
  chartInit.value.setOption(option, true);
}

watch(() => props.chartData, (newVal, oldVal) => {
  chartData.value = props.chartData.map(item => {
    return {
      id: item.id,
      name: item.tagName,
      value: item.count * 1,
    }
  })
  nextTick(() => {
    getChartData()
  })
}, { immediate: true })

onMounted(() => {
  window.addEventListener('resize', resize)
})

const resize = () => {
  chartInit.value && debounce(chartInit.value.resize.bind(), 300)({
    animation: {
      duration: 700,
      easing: 'linear',
    }
  })
}

watch(() => useMenuList().collapseStatus, (newVal, oldVal) => {
  nextTick(() => resize())
})

onUnmounted(() => {
  chartInit.value && chartInit.value.dispose()
  chartInit.value = null
  window.removeEventListener('resize', () => resize())
})

</script>

<style lang="scss" scoped>
.chartContent {
  width: 100%;
  height: 100%;
}
</style>
